<template>
  <div class="layout-content">
    <div class="layout-content-main">
      <Breadcrumb class="content-title mbt1">
        <BreadcrumbItem>系统角色</BreadcrumbItem>
      </Breadcrumb>
      <div class="section">
        <div class="section-title">
          系统角色
        </div>
        <Row class="mbt4">
          <Col span="6">
          <!-- <Select @on-change="selectChange" v-model="roleName">
                        <Option :key="item.roleName" v-for="item in roleNameList" :value="item.roleName">{{item.roleName}}</Option>
                        
          </Select> -->
          <Input v-model="searchValue" placeholder="请输入角色名称">

          <Button slot="append" icon="ios-search"  @click="searchRole()"></Button>
          </Input>
          </Col>
        </Row>
        <Table border :columns="columns7" :data="roleList" class="mbt4"></Table>
        <Page :total="roleListNum" show-total class="center" @on-change="changePage" :page-size='9'></Page>
        <!-- 选择权限的弹出框start -->
       
        <Modal v-model="chooseJurisdictionModal" class="small-modal" title="选择权限">
            
              <el-tree                           
                                            
                  :data="jurisdictionTreeData"                         
                  :props="defaultProps"                               
                  node-key="functionId"       
                  :check-strictly="true"                                                                                                          
                  :expand-on-click-node="false"                                                                            
                  show-checkbox
                  ref="tree" style="border:none">
              </el-tree>

            <div slot="footer">
                <Button @click="chooseJurisdictionModal=false">取消</Button>
                <Button type="primary" @click="getCheckedNodes">保存</Button>
            </div>
        </Modal>

        <!-- 选择权限的弹出框end -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseJurisdictionModal: false,
      jurisdictionTreeData: [],
      chooseList:[],
      roleList: [],
      searchValue: "",
      roleListNum: 0,
      pageNum: 1,
      pageSize: 9,
      roleId:'',
      functionIds:[],
      defaultProps: {
        children: "childList",
        label: "functionName"
      },
      columns7: [
        {
          title: "角色编号",
          type: "index",
          align: "center",
          width: "150"
        },
        {
          title: "角色名称",
          key: "roleName",
          align: "center"
        },
        {
          title: "创建人",
          key: "createUserName",
          align: "center",
          render: (h, params) => {
            if (params.row.createUserName == null) {
              return "暂无";
            }else{
              return params.row.createUserName;
            }
          }
        },

        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          render: (h, params) => {
            if (params.row.createTime == null) {
              return "暂无";
            }else{
              return new Date(parseInt(params.row.createTime))
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
            }
          }
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.chooseJurisdictionModal = true;
                      
                      this.roleId = params.row.roleId;
                      this.getJurisdictionTreeData(params).then((state)=>{
                      this.setCheckedKeys()
                      })
                    }
                  }
                },
                "选择权限"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted() {
    this.getRoleList(this.pageNum, this.pageSize, "");
  },
  methods: {
    //根据roleId查询权限数
    getJurisdictionTreeData(params) {
      return new Promise((resolve, reject) => {
      this.$ajax
        .post("/api/role/function/tree", `roleId=${params.row.roleId}`)
        .then(response => {
        //  console.log(response.data);
          if (response.data.code == 1) {
            this.jurisdictionTreeData = response.data.resdata.treeList;
            this.chooseList = response.data.resdata.chooseList;
            resolve(true)
            
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
      })
    },
     setCheckedKeys(){
       this.$refs.tree.setCheckedKeys(this.chooseList);
     },
    //获取需要提交的权限id
    getCheckedNodes() {
      let getCheckedNodes = this.$refs.tree.getCheckedNodes();
      getCheckedNodes.forEach((item)=> {
        this.functionIds.push(item.functionId);
      });
      let str = this.functionIds.join(",")
     // console.log(str)
      this.$ajax.post("/api/role/function/saveRoleFunction",`roleId=${this.roleId}&functionIds=${str}`)
      .then(response=>{
        if(response.data.code==1){
         // console.log(response.data)
         this.$Message.success(response.data.msg);
         this.chooseJurisdictionModal = false;
         this.$refs.tree.setCheckedKeys([]);
         this.functionIds=[]
         this.chooseList=[]
        }else{
          this.$Modal.error({
            title: "错误",
            content: response.data.msg
          });
        }
      }).catch(error=>{
        this.$Modal.error({
            title: "错误",
            content: error
          });
      })
    },
    checkChoose() {
      //树形选中事件
    },

    remove(index) {
      //删除
      this.data6.splice(index, 1);
    },
    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      this.$Message.info("点击了取消");
    },
    //获取角色
    getRoleList(pageNum, pageSize, searchValue) {
      this.$ajax
        .post(
          "/api/roleInfo/info/queryRoleListByRoleType",
          `roleType=0&pageNum=${pageNum}&pageSize=${pageSize}&roleName=${searchValue}`
        )
        .then(response => {
          // console.log(response.data)
          if (response.data.code == 1) {
            this.roleList = response.data.resdata.list;
            this.roleListNum = response.data.resdata.total;
          } else {
          }
        })
        .catch(error => {});
    },
    searchRole() {
      this.getRoleList(this.pageNum, this.pageSize, this.searchValue);
    },
    //分页查询
    changePage(data) {
      this.getRoleList(data, this.pageSize,this.searchValue);
    }
  }
};
</script>

<style>


</style>
